<template>
  <el-card>
      <div class="box-msg-container">
        <div class="price-v">
          <div class="price-v-top">
            <div class="price-v-top-title">今日贷款金额</div>
            <div class="price-v-top-num">5000000<span>元</span></div>
          </div>
          <div class="price-v-bottom">
            <span>笔数：</span>
            <span>3</span>
          </div>
        </div>
        <div class="price-v">
          <div class="price-v-top">
            <div class="price-v-top-title">今日贷款金额</div>
            <div class="price-v-top-num">5000000<span>元</span></div>
          </div>
          <div class="price-v-bottom">
            <span>笔数：</span>
            <span>3</span>
          </div>
        </div>
        <div class="price-v">
          <div class="price-v-top">
            <div class="price-v-top-title">今日贷款金额</div>
            <div class="price-v-top-num">5000000<span>元</span></div>
          </div>
          <div class="price-v-bottom">
            <span>笔数：</span>
            <span>3</span>
          </div>
        </div>
        <div class="msg-v">
          <div class="msg-v-title">所有贷款状态</div>
          <div class="msg-v-content">
            <div class="msg-v-content-item">
              <div>9</div>
              <div>提交材料</div>
            </div>
            <div class="msg-v-content-item">
              <div>9</div>
              <div>银行受理</div>
            </div>
            <div class="msg-v-content-item">
              <div>9</div>
              <div>贷款发放</div>
            </div>
            <div class="msg-v-content-item">
              <div>9</div>
              <div>审批失败</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
</template>

<script>
export default {
    name: 'loanManagement',

}
</script>

<style scoped lang="scss">
.line {
  min-height: 100px;
  width: 1px;
  background-color: #000;
}
.box-msg-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  min-height: 140px;
  .price-v {
    width: 20%;
    min-width: 250px;
    border-right: 1px solid #eee;
    padding: 20px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .price-v-top {
      .price-v-top-title {
        color: #222;
        font-size: 14px;
      }
      .price-v-top-num {
        margin-top: 5px;
        font-size: 30px;
        font-weight: 500;
        > span {
          display: inline-block;
          font-size: 14px;
          color: #222;
          margin-left: 5px;
        }
      }
    }
    .price-v-bottom {
      display: inline-block;
      font-size: 14px;
      color: #999;
    }
  }
  .msg-v {
    width: 40%;
    min-width: 450px;
    padding: 20px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .msg-v-title {
      font-size: 14px;
      color: #222;
      font-weight: 500;
    }
    .msg-v-content {
      padding-left: 30px;
      // margin-top: 60px;
      display: flex;
      justify-content: space-between;
      .msg-v-content-item {
        text-align: center;
        > div {
          &:nth-child(1) {
            font-weight: 500;
          }
          &:nth-child(2) {
            font-size: 14px;
            color: #999;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>